<template>
    <div>
        <a-card title="广告管理" :bordered="false">
            <template #extra><a href="#">查看广告位图里位置说明</a></template>
            <div>
                <a-alert type="warning" style="border-left: 5px solid rgb(255 229 143);">
                    <template #description>
                    <p style="color: rgb(255 200 1);">
                        系统内置广告位不能删
                    </p>
                    <p style="color: rgb(255 200 1);">
                        自定义广告位调用名不可以以“QS_”开头
                    </p>
                    </template>
                </a-alert>
            </div>
            <a-table 
                :columns="columns" 
                :data-source="datas" 
                style="margin-top: 5vh;" 
                :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                :pagination="false"
                :rowKey="(data)=>data.id"
            >
                <template #action="{ column,record }">
                    <a style="margin: 2px;" @click="showModal2(record)">编辑</a>
                    <a style="margin: 2px;" @click="del(record.id)">删除</a>
                </template>
                <template #wh="{ column,record }">
                    <span>{{record.width}}</span><span>*</span><span>{{record.hidth}}</span>
                </template>
            </a-table>
            <br>
            <div style="display: flex;">
                <div style="flex: 1;">
                    <a-button type="primary"  @click="showModal()">添加广告位</a-button>
                    <a-button type="primary" danger style="margin-left: 10px;">删除所选</a-button>
                </div>
                <a-pagination
                    v-model:current="page"
                    v-model:page-size="pageSize1"
                    :total="count"
                    :show-total="total => `共 ${count} 条`"
                    show-size-changer
                    show-quick-jumper
                    @change="PageChange"
                    @showSizeChange="showSizeChange"
                />
            </div>
        </a-card>
        <a-modal v-model:visible="visible" title="添加广告位" @ok="handleOk">
            <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-item label="所属平台">
                    <a-select v-model:value="formState.pt" placeholder="请选择所属平台">
                        <a-select-option value="App">App</a-select-option>
                        <a-select-option value="触屏端">触屏端</a-select-option>
                        <a-select-option value="微信小程序">微信小程序</a-select-option>
                        <a-select-option value="pc端">pc端</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="广告位名称">
                    <a-input v-model:value="formState.ggname" />
                </a-form-item>
                <a-form-item label="调用名称">
                    <a-input v-model:value="formState.dyname" />
                </a-form-item>
                <a-form-item label="数量">
                    <a-input v-model:value="formState.num" />
                </a-form-item>
                <a-form-item label="建议宽度">
                    <a-input v-model:value="formState.width" />
                </a-form-item>
                <a-form-item label="建议高度">
                    <a-input v-model:value="formState.hidth" />
                </a-form-item>
            </a-form>
        </a-modal>
        <a-modal v-model:visible="visible2" title="修改信息" @ok="handleOk2">
            <a-form :model="formState2" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-item label="所属平台">
                    <a-select v-model:value="formState2.pt" placeholder="请选择所属平台">
                        <a-select-option value="App">App</a-select-option>
                        <a-select-option value="触屏端">触屏端</a-select-option>
                        <a-select-option value="微信小程序">微信小程序</a-select-option>
                        <a-select-option value="pc端">pc端</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="广告位名称">
                    <a-input v-model:value="formState2.ggname" />
                </a-form-item>
                <a-form-item label="调用名称">
                    <a-input v-model:value="formState2.dyname" />
                </a-form-item>
                <a-form-item label="数量">
                    <a-input v-model:value="formState2.num" />
                </a-form-item>
                <a-form-item label="建议宽度">
                    <a-input v-model:value="formState2.width" />
                </a-form-item>
                <a-form-item label="建议高度">
                    <a-input v-model:value="formState2.hidth" />
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script setup>
import { reactive, ref,toRefs,onMounted } from 'vue'
import {getguanggao,addguanggao,putguanggao,delguanggao} from '../../../api/guanggao'
import { message } from 'ant-design-vue'
    let value1 = ref('')
    let value2 = ref('标题')
    let value3 = ref('不限平台')
    let value4 = ref('不限广告位')
    let value5 = ref('不限显示状态')
    let value6 = ref('不限到期时间')
    let count = ref(0)
    let page = ref(1)
    let page_size = ref(10)
    let {
            options,
            columns,
            datas,
            selectedRowKeys,
            loading,
            formState,
            formState2,
        } = toRefs(reactive({
        options:[
            {
                value: 'zhejiang',
                label: 'Zhejiang',
                children: [
                {
                    value: 'hangzhou',
                    label: 'Hangzhou',
                    children: [
                    {
                        value: 'xihu',
                        label: 'West Lake',
                    },
                    ],
                },
                ],
            },
            {
                value: 'jiangsu',
                label: 'Jiangsu',
                children: [
                {
                    value: 'nanjing',
                    label: 'Nanjing',
                    children: [
                    {
                        value: 'zhonghuamen',
                        label: 'Zhong Hua Men',
                    },
                    ],
                },
                ],
            }
        ],
        columns:[
            { title: '广告位名称', dataIndex: 'ggname', key: 'id',  },
            { title: '调用名称',  dataIndex: 'dyname', key: 'id',  },
            { title: '建议尺寸', key: 'id',slots:{customRender:'wh'}},
            { title: '广告数量', dataIndex: 'num', key: 'id'},
            { title: '类型', dataIndex: 'pt', key: 'id' },
            {
                title: 'Action',
                key: 'operation',
                fixed: 'right',
                width: 100,
                slots:{customRender:'action'}
            },
        ],
        datas:[],
        selectedRowKeys: [],
        loading: false,
        formState:{
            pt:'',
            ggname:'',
            dyname:'',
            num:'',
            width:'',
            hidth:'',
        },
        formState2:{}
    }))
    const getdata = async()=>{
        let {data} =await getguanggao({page:page.value,page_size:page_size.value})
        count.value=data.count
        datas.value=data.data
        console.log(data);
    }
    // 改变页数触发
    const PageChange = (v) =>{
        page.value = v
        getdata()
    }

    // 改变每页条数触发
    const showSizeChange = (v,v1) =>{
        page_size.value = v1
        getdata()
    }
    const onSelectChange = selectedRowKeys => {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      selectedRowKeys.value = selectedRowKeys;
    };
    // 添加
    const visible = ref(false);

    const showModal = () => {
      visible.value = true;
    };

    const handleOk = async()=> {
      console.log(formState.value);
      let {data} =await addguanggao(formState)
      data.code == 200 ? (message.success(data.msg),getdata()) : message.error(data.msg)
      visible.value = false;
    };
    const visible2 = ref(false);

    const showModal2 = (v) => {
        formState2.value=v
      visible2.value = true;
    };

    const handleOk2 = async()=> {
      console.log(formState2.value);
        let {data} = await putguanggao(formState2)
        data.code == 200 ? (message.success(data.msg),getdata()) : (message.error(data.msg),getdata())
      visible2.value = false;
    };

    const del =async (id)=>{
        let {data} = await delguanggao(id)
        data.code == 200 ? (message.success(data.message),getdata()) : message.error('删除失败'+data.message)
    }
    onMounted(()=>{
        getdata()
    })
</script>

<style scoped>
    
</style>